<template>
  <div id="app">
      <router-view/>
    <router-view name="Footer"></router-view>
  </div>
</template>
<script>
export default {
  
}
</script>
<style>
*{
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
html,body,#app {
  height: 100%;
}
html{
  font-size: 26.67vw;
}
body{
  font-size: 16px;
}
/* ---------------------app的设置 ------------------ */
#app{
  display: flex;
  flex-direction: column;
}
/* ------------------大盒子的设置---------- */
#app .box{
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* --------------头部样式----------- */
#app .box .header{
  height: .44rem;
  background-color: orangered;
}

/* --------------中间样式----------- */
#app .box .main{
  flex: 1;
  overflow-y: auto;
  background-color: #ccc;

}
/* ---------------------底部的设置 ----------------- */
#app .footer{
  height: .44rem;
  /* background-color: aquamarine; */
  background-color: #ccc;
  border-top: 1px solid gray;
}
#app .footer ul{
  display: flex;
  height: 100%;
  justify-content: space-around;
  align-items: center;
}

#app .footer ul li.router-link-exact-active{
  color: blue;
}

#app .footer ul li{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#app .footer ul li span{
  font-size: .2rem;
}

</style>
